<template>
  <div class="region-cascader">
    <el-cascader
      v-model="selectedRegion"
      :options="regionOptions"
      :props="cascaderProps"
      @change="handleChange"
      clearable
      placeholder="请选择省/市/区县"
    ></el-cascader>
  </div>
</template>

<script>
import { listRegionByParent } from '@/api/boss/region'

export default {
  name: 'RegionCascader',
  props: {
    // 初始值
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 选中的区域值
      selectedRegion: [],
      // 区域选项
      regionOptions: [],
      // 级联选择器属性
      cascaderProps: {
        value: 'value',
        label: 'label',
        children: 'children',
        lazy: true,
        lazyLoad: this.loadRegionData
      }
    }
  },
  watch: {
    value: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.selectedRegion = [...newVal]
        }
      },
      immediate: true
    }
  },
  created() {
    // 初始化省级数据
    this.initProvinceData()
  },
  methods: {
    // 初始化省级数据
    initProvinceData() {
      listRegionByParent(0).then(response => {
        this.regionOptions = response.data
      })
    },
    // 懒加载区域数据
    loadRegionData(node, resolve) {
      const { level, value } = node
      
      // 如果是根节点，加载省级数据
      if (level === 0) {
        listRegionByParent(0).then(response => {
          resolve(response.data)
        })
        return
      }
      
      // 加载子级数据
      listRegionByParent(value).then(response => {
        const data = response.data.map(item => {
          // 判断是否还有子节点（根据是否有下一级数据）
          item.leaf = level >= 2 // 省-市-区县，最多三级
          return item
        })
        resolve(data)
      })
    },
    // 区域选择变化
    handleChange(value) {
      this.$emit('input', value)
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped>
.region-cascader {
  width: 100%;
}
</style>